<template>
  <div>
    <table border="1" cellspacing="0" width="80%">
      <thead>
      <tr>
        <th>商品名</th>
        <th>产地</th>
        <th>单价</th>
        <th>数量</th>
        <th>单项总价</th>
        <th>类别</th>
        <th>操作</th>
      </tr>
      </thead>

      <tbody>
      <tr v-for="product in productList">
        <td>{{ product.name }}</td>
        <td>{{ product.factory }}</td>
        <td>{{ product.price }}</td>
        <td><input type="text" v-model="product.num"></td>
        <td>{{ product.price * product.num }}</td>
        <td>{{ product.type }}</td>
        <td><input type="button" value="删除" @click="del(product.id)"/>
          <input type="button" value="修改" @click="findById(product.id)">
        </td>
      </tr>
      </tbody>
      <input type="button" v-for="page in pages" :key="page"
             :value="page" @click="findByItem(page)" style="margin-left: 10px;"/>

      <div>
        购物车总价：{{ totalPrice }}
      </div>
      <input type="button" value="添加" @click="addVisible=true"/>
    </table>

    <div class="dialogDiv" v-if="addVisible">
      <div class="content">
        编号：<input type="text" v-model="addObj.id"><br>
        商品名：<input type="text" v-model="addObj.name"><br>
        产地：<input type="text" v-model="addObj.factory"><br>
        单价：<input type="text" v-model="addObj.price"><br>
        类别：<select v-model="addObj.type">
        <option value="电器">电器</option>
        <option value="食品">食品</option>
      </select><br>
        <input type="button" value="添加" @click="addProdut">
      </div>
    </div>

    <div class="dialogDiv" v-if="updateVisible">
      <div class="content">
        编号：{{ updateObj.id }}<br>
        商品名：{{ updateObj.name }}<br>
        产地：{{ updateObj.factory }}<br>
        单价：<input type="text" v-model="updateObj.price"><br>
        类别：{{ updateObj.type }}<br>
        <input type="button" value="修改" @click="updateProduct">
      </div>

    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      addVisible: false,
      pages: 5,
      addObj: {},
      productList: [
        {"id": 1, "name": "电饭煲", factory: "深圳", price: 500, type: "电器", num: 1},
        {"id": 2, "name": "饼干", factory: "青岛", price: 12, type: "食品", num: 1},
        {"id": 13, "name": "电水壶", factory: "北京", price: 400, type: "电器", num: 1},
        {"id": 4, "name": "电冰箱", factory: "青岛", price: 1400, type: "电器", num: 1},
        {"id": 8, "name": "汉堡", factory: "成都", price: 4, type: "食品", num: 1},
        {"id": 5, "name": "薯条", factory: "上海", price: 6, type: "食品", num: 1}
      ],
      updateVisible: false,
      updateObj: {}
    }
  },
  methods: {
    addProdut() {
      //在集合中添加对象
      this.productList.push(this.addObj);
      this.addVisible = false;
    },
    del(id) {
      //找到指定编号对应的下标
      var index = this.productList.findIndex(n => n.id == id);
      this.productList.splice(index, 1);
    },
    findById(id) {
      this.updateVisible = true;
      this.updateObj = this.productList.find(n => n.id == id);
    },
    updateProduct() {
      this.updateObj = {};
      this.updateVisible = false;
    },
    findByItem(page) {
      alert(page);
    }
  },
  computed: {
    totalPrice() {
      var total = 0;
      this.productList.forEach(n => {
        total += n.price * n.num;
      });
      return total;
    }
  }
}
</script>

<style scoped>
.dialogDiv {
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.5);
  display: flex;
  position: absolute;
  left: 0px;
  top: 0px;
  justify-content: center;
  align-items: center;
}

.content {
  width: 600px;
  height: 400px;
  background: white;
  border: 2px solid #000;
  padding: 20px;
}
</style>